<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <input type="text" class="ipt" placeholder="请输入您的问题" />

    <!-- 导入了 在线的js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      // 把弹框的内容 设置给 p标签
      document.querySelector('.ipt').onkeyup = function (e) {
        // 限制回车触发
        if (e.keyCode !== 13) return
        // 去空格 并保存
        const content = this.value.trim()
        // 内容非空判断 不为 空 !''->true
        if (!content) {
          return alert('请输入提问的内容')
        }
        // ajax前后端交互
        axios({
          url: `http://ajax-api.itheima.net/api/robot?spoken=${content}`,
          method: 'get',
        }).then((res) => {
          console.log(res)
          alert(res.data.data.info.text)
        })
      }
    </script>
  </body>
</html>
